<!-- 第三行内容 -->
<template>
  <div class="container">
    <div class="left-pane" :style="{ width: leftWidth + 'px' }">
      <!-- 左边内容 -->
      <LeftTable :year="props.year" />
    </div>
    <div class="resizer" @mousedown="startResize"></div>
    <div class="right-pane" :style="{ width: rightWidth + 'px' }">
      <!-- 放大镜图标 -->
      <div class="zoom-control" @click="openZoomModal">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgba(0,0,0,0.7)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          <line x1="11" y1="8" x2="11" y2="14"></line>
          <line x1="8" y1="11" x2="14" y2="11"></line>
        </svg>
      </div>
      <!-- 右边内容 -->
      <div id="sreen-map" style="width: 100%; height: 100%; position: relative">
        <div class="map-legend">
          <el-image style="width: 110px; height: 40px; top: -12px" :src="legend_zdpt" fit="contain" />
        </div>
      </div>
      <!-- 放大框 -->
      <div v-if="showZoomModal" class="zoom-modal" @click.self="closeZoomModal">
        <div class="zoom-modal-content">
          <button class="close-btn" @click="closeZoomModal">×</button>
          <div id="zoomed-map" style="width: 100%; height: 100%; position: relative">
            <div class="zoomed-legend">
              <el-image style="width: 180px; height: 180px; bottom: 72px" :src="legend_zdpt" fit="contain" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { initMap } from '@/utils/map';
import { onMounted, onUnmounted, ref, nextTick } from 'vue';
import LeftTable from './LeftTable.vue';
import byzdpt from '@/assets/zdpt.json';
import legend_zdpt from "@/assets/legend_zdpt.png";

const props = defineProps({ year: Number });

// 拖动条幅调整大小
const container = ref(null);
const leftWidth = ref(1400);
const rightWidth = ref();

let startX = 0;
let initialLeftWidth = 0;

const calcRemainingWidth = (leftWidth) => {
  return container.value.clientWidth - leftWidth - 5; // 5 是分割线的宽度
};

const startResize = (event) => {
  startX = event.clientX;
  initialLeftWidth = leftWidth.value;

  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
};

const onMouseMove = (event) => {
  const deltaX = event.clientX - startX;
  leftWidth.value = initialLeftWidth + deltaX;
  rightWidth.value = calcRemainingWidth(leftWidth.value);
};

const onMouseUp = () => {
  document.removeEventListener("mousemove", onMouseMove);
  document.removeEventListener("mouseup", onMouseUp);
};

// 添加矢量图层到地图
const createVectorLayer = () => {
  // eslint-disable-next-line no-undef
  let wsgGeo = L.geoJSON(byzdpt)
  // eslint-disable-next-line no-undef
  wsgGeo =  L.Util.transform(wsgGeo, GZ2000,L.CRS.EPSG4326);
  // eslint-disable-next-line no-undef
  return L.geoJSON(wsgGeo)
};

// 放大镜功能
const showZoomModal = ref(false);
let zoomedMap = null;

const openZoomModal = async () => {
  showZoomModal.value = true;
  await nextTick();
  // 每次打开都重新初始化地图
  if (zoomedMap) {
    zoomedMap.remove(); // 移除旧地图实例
  }
  zoomedMap = await initMap('zoomed-map');
  // 添加矢量图层到放大地图
  createVectorLayer().addTo(zoomedMap);
  // 复制当前地图的状态到放大视图
  if (window.screenmap) {
    const mainMap = window.screenmap;
    zoomedMap.setView(mainMap.getCenter(), mainMap.getZoom() + 2);
  }
};

const closeZoomModal = () => {
  showZoomModal.value = false;
};

// 界面大小改变，重新刷新地图

const updateMapCenter = () => {
  if (window.screenmap) {
    window.screenmap.setView(window.screenmap.getBounds().getCenter(), window.screenmap.getZoom(), { animate: false });
  }
};

const onResizeObserver = new ResizeObserver(() => {
  updateMapCenter();
  window.screenmap.invalidateSize()
});

onMounted(() => {
  container.value = document.querySelector(".container");
  rightWidth.value = calcRemainingWidth(leftWidth.value);
  window.screenmap = initMap('sreen-map');
  createVectorLayer().addTo(window.screenmap);
  onResizeObserver.observe(document.getElementById('sreen-map'));
});

onUnmounted(() => {
  onResizeObserver.disconnect();
  document.removeEventListener("mousemove", onMouseMove);
  document.removeEventListener("mouseup", onMouseUp);
  if (zoomedMap) {
    zoomedMap.remove();
  }
  if (window.screenmap) {
    window.screenmap.remove();
  }
});
</script>

<style scoped>
.container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.left-pane,
.right-pane {
  box-sizing: border-box;
}

.right-pane {
  flex-grow: 1;
}

.resizer {
  width: 5px;
  cursor: ew-resize;
  background-color: #ccc;
  user-select: none;
}

.zoom-control {
  position: absolute;
  top: 650px;
  right: 5px;
  z-index: 1000;
  padding: 5px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  backdrop-filter: blur(2px);
  transition: all 0.2s;
}

.zoom-control:hover {
  background-color: rgba(255, 255, 255, 0);
  transform: scale(1);
}

.zoom-control svg {
  display: block;
}
.zoom-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.zoom-modal-content {
  width: 90%;
  height: 90%;
  background: white;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3000;
  background: #fff;
  border: none;
  font-size: 24px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.close-btn:hover {
  background: #f0f0f0;
}
.map-legend {
  position: absolute;
  z-index: 1000;
  right: 10px;
  height: 30px;
  width: 115px;
  bottom: 10px;
  background: rgba(255, 255, 255, 0.8);
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.zoomed-legend {
  position: absolute;
  z-index:999;
  right: 40px;
  bottom: 40px;
  padding: 8px;
  height: 50px;
  width: 180px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
</style>
